<template>
    <el-row>

     
        <div class="app-container">
          <div class="filter-container">
            <!-- <div class="filter-item">
              <span class="span">数据源 </span>
              <el-input v-model="listQuery.tableName" placeholder="请输入数据源" style="width: 200px" />
            </div> -->
            <div class="filter-item">
              <span class="span">表名 </span>
              <el-input v-model="listQuery.tableName" placeholder="请输入表名" style="width: 200px" />
            </div>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
              {{ $t('table.search') }}
            </el-button>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
              {{ $t('table.add') }}
            </el-button>
          </div>
  
          <el-table ref="table" :key="tableKey"  :data="list" border fit highlight-current-row
            style="width: 100%;" @selection-change="handleSelectionChange" max-height="400px">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column type="index" align="center" label="序号" width="100px" />
     
            <el-table-column label="表名" align="center" min-width="100px">
              <template slot-scope="{row}">
                <span>{{ row.tableName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="表注释" align="center" min-width="150px">
              <template slot-scope="{row}">
                <span>{{ row.tableComment }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发布状态" align="center" min-width="100px">
              <template slot-scope="{row}">
                <span>{{ row.releaseStatus|dictLabel('res_status') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" min-width="100px" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button  type="text" size="small"
                  icon="el-icon-document" @click="handleLook(row)">
                  {{ $t('table.look') }}
                </el-button>
                <el-button  type="text" size="small"
                  icon="el-icon-edit" class="edit-text-btn" @click="handleEdit(row)">
                  {{ $t('table.edit') }}
                </el-button>
                <el-button  type="text" size="small"
                  icon="el-icon-delete" class="delete-text-btn" @click="handleDelete(row)">
                  {{ $t('table.delete') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
            <modelFrom ref="from" @resList="getList"></modelFrom>
          <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            :page-sizes="pageArray" @pagination="getList" />
          
        </div>
    
    </el-row>
  </template>
  
  <script>
  import { fetchMedoleList,deleteModelData } from '@/api/model/datamodel'
  import waves from '@/directive/waves' // waves directive
  import permission from '@/directive/permission/permission'
  import Pagination from '@/components/Pagination'
  import modelFrom from './datamodelFrom.vue'
  export default {
    name: 'MasterdataTableList',
    components: {  Pagination,modelFrom },
    directives: { waves, permission },
    data() {
      return {
        tableKey: 0,
        treeList: [],
        list: null,
        total: 0,
        multipleSelection: [],
        downloadLoading: false,
        listLoading: true,
        pageArray: this.$store.getters.pageArray,
        listQuery: {
          page: 1,
          limit: this.$store.getters.defaultPageSize,
          type:'0'
        },
        isLoading: false,// 是否加载
      }
    },
    computed: {
      ids() {
        const ids = []
        this.multipleSelection.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(',')
      }
    },
    created() {
        this.getList()
    },
    methods: {
      getListByTreeId(data) {
        this.listQuery.directory_id = data.id
        this.getList()
      },
      getList() {
        this.listLoading = true
        fetchMedoleList(this.listQuery).then(res=>{
            if(res.data.code==200){
                this.list=res.data.data.records
                this.total=res.data.data.total*1
            }else{
                this.$message.error(res.data.msg)
            }
            this.listLoading = false
        })
      },

      handleNodeClick(data) {
        this.getList()
      },

      handleCreate() {
          this.$refs.from.handleCreate()
      },
      handleUpdate(row) {

      },
      //查看详情
      handleDetail(row) {

      },
      handleDelete(row) {
        this.$confirm('确定删除该数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleteModelData(row.id).then(res=>{
                if(res.data.code==0){
                    this.$message.success(res.data.msg)
                    this.getList()
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        })
          .catch(() => { })
      },
      handleEdit(row){
        this.$refs.from.handleUpdate(row.id)
      },
      handleLook(row){
        this.$refs.from.handleLook(row.id)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleBathDelete() {
        if (this.ids === '') {
          this.$message.warning('请选择至少一条数据')
          return
        }
        this.$confirm('确定删除所选数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
  </script>
<style lang="scss" scoped>
::v-deep(::-webkit-scrollbar) {
  display: block !important;
}
  .span {
    color: #606266;
    font-weight: 700;
    font-size: 14px;
  }
  </style>
  